<template>
  <div class="card">
    <div class="card-header">
      <h4>{{ SecureCaption }}</h4>
    </div>
    <div class="card-body">
      <p>
        <b>{{ SecureData }}</b>
      </p>
      <admin-view :accessToken="accessToken" @expiredAccess="emitExpiredAccess" />
    </div>
  </div>
</template>

<script>
import dotnetify from "dotnetify/vue";
import AdminView from "./SecurePage.AdminView.vue";

export default {
  name: "SecureView",
  components: {
    "admin-view": AdminView
  },
  props: {
    accessToken: String
  },
  created() {
    let authHeader = { Authorization: "Bearer " + this.accessToken };
    this.vm = dotnetify.vue.connect("SecurePageVM", this, {
      headers: authHeader,
      exceptionHandler: ex => this.onException(ex)
    });
  },
  unmounted() {
    this.vm.$destroy();
  },
  data() {
    return {
      SecureCaption: "Not authenticated",
      SecureData: "",
      ExceptionType: "",
      Message: ""
    };
  },
  methods: {
    onException: function (exception) {
      if (exception.name == "UnauthorizedAccessException") this.emitExpiredAccess();
    },
    emitExpiredAccess: function () {
      this.$emit("expiredAccess");
    }
  }
};
</script>
